<template>
  <div class="project">
    <div class="header">
      <div class="header-content-box">
        <div class="header-left">
          <div class="title">项目</div>
        </div>
        <div class="header-right">
          <div class="action-box">
            <div class="header-button basebtn">
              <button class="basebtn-common lan" @click="createProject">+ 创建项目</button>
            </div>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon" :class="{'icon-project-active': activeTab === 1, 'icon-project-disactive': activeTab === 2}"></i>项目视图
            </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon" :class="{'icon-task': activeTab === 1, 'icon-active-task': activeTab === 2}"></i>任务视图
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前激活tab页
      // activeTab: 1
    }
  },
  methods: {
    // tab页切换
    toggleActive (val) {
      if (val === 1) {
        this.$router.push({ path: '/project/list' })
      } else {
        this.$router.push({ path: '/project/task' })
      }
    },
    // 创建项目
    createProject () {
      this.$router.push('/project/create')
    }
  },
  computed: {
    activeTab: {
      get: function () {
        if (this.$route.path === '/project/list') {
          return 1
        } else {
          return 2
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.project
  display flex
  flex-flow column
  .header
    background #f4f7f8
    .header-content-box
      display flex
      width 100%
      margin 0 auto
      max-width 1162px
      padding 20px 0
      .header-left
        width 50%
        .title
          font-weight 600
          font-size 28px
          color #2D323B
          letter-spacing 0
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
      .header-right
        width 50%
        .action-box
          display flex
          justify-content flex-end
    .nav-list
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 15px
            height 44px
            .icon
              display inline-block
              width 30px
              height 50px
            .icon-project-active
              background url(../../common/image/icon/icon-pro-list-active.png) no-repeat center
              // background url(../../common/image/icon-all.png) no-repeat
              // background-position -204px -348px
              background-size 13px 14px
            .icon-project-disactive
              background url(../../common/image/icon/icon-pro-list-disactive.png) no-repeat center
              background-size 13px 14px
            .icon-task
              background url(../../common/image/icon/task.png) no-repeat center
              background-size 13px 14px
            .icon-active-task
              background url(../../common/image/icon/active-task.png) no-repeat center
              background-size 13px 14px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
    .nav-left
      width 40%
    .nav-right
      width 60%
      display flex
      align-items center
      justify-content flex-end
  .content
    flex 1
    width 100%
    position relative
    margin 0 auto
    max-width 1162px
</style>
